import React, { Component } from 'react';
import { connect } from 'react-redux'
import moment from 'moment'
import {Modal, Form, Input,Select ,DatePicker ,Table,Button,TreeSelect,  Popconfirm,Row,Col,} from 'antd';
var _this,_props,_state;


const FormItem = Form.Item;
const Option = Select.Option;
const TreeNode = TreeSelect.TreeNode;

class EditBorrowModal extends Component {
  constructor(props) {
    super(props)
  }

  okHandler = () => {
     const { onOk } = this.props;
     this.props.form.validateFields((err, values) => {
      if (!err) {
        onOk(values);
      }
     });
  };

  //点击迁移弹出迁移窗口
  onAddTransferItem = (id) => {
     const { onAddTransferItem } = this.props;
     onAddTransferItem(id);
  };

  //点击增加迁移详情
  onAddDetail = () => {
     const { onAddDetail } = this.props;
     this.props.form.validateFields((err, values) => {
     if (!err) {
       onAddDetail();
      }
    });
  };

   //点击编辑弹出编辑窗口
   onEditTransfer = (id) => {
     const { onEditTransfer } = this.props;
     this.props.form.validateFields((err, values) => {
      if (!err) {
        onEditTransfer(id);
       }
     });
   };


  render() {
    const { children, dispatch,assetType,assetList,id,editDetailList,item,roomList,assetBrandList,userList,addDetailHandler } = this.props;

    const { getFieldDecorator } = this.props.form;
    const formItemLayout = {
      labelCol: { span: 6 },
      wrapperCol: { span: 16 },
    };
    const formItemLayout2 = {
      labelCol: { span: 2 },
      wrapperCol: { span: 18 },
    };

    const formItemLayout3 = {
      labelCol: { span: 3 },
      wrapperCol: { span: 18 },
    };

    const getRoom = data => data.map((item) => {
     return <Option key={item.id_+''}>{item.name}</Option>
    })

    const getUser = data => data.map((item) => {
     return <Option key={item.id_+''}>{item.name}</Option>
    })

    const columns = [{
      title: '资产编号',
      dataIndex: 'assetNo',
      key: 'assetNo',
      fixed: 'left',
      width: 150
    },{
      title: '资产分类',
      dataIndex: 'typeName',
      key: 'typeName',
      width: 120
    },{
      title: '设备名称',
      dataIndex: 'assetName',
      key: 'assetName',
      width: 120
    },{
      title: '设备型号',
      dataIndex: 'modelName',
      key: 'modelName',
      width: 120,
    },{
      title: '设备序列号',
      dataIndex: 'serialNo',
      key: 'serialNo',
      width: 150,
    },{
      title: 'RFID编码',
      dataIndex: 'rfidNo',
      key: 'rfidNo',
      width: 100,
    },
    {
      title: '状态',
      dataIndex: 'status',
      key: 'status',
      width: 80,
      render: (value, row, index) => {
        return (
             value==1?"新增状态":value==2?"已借用":value==3?"已归还":''
         )
      }
    },
    {
      title: '原管理部门',
      dataIndex: 'originalManageBranchName',
      key: 'originalManageBranchName',
      width: 120,
    },
    {
      title: '原领用部门',
      dataIndex: 'originalUseBranchName',
      key: 'originalUseBranchName',
      width: 120,
    },
    {
      title: '原领用人',
      dataIndex: 'originalEndUser',
      key: 'originalEndUser',
      width: 120,
    },
    {
      title: '目标管理部门',
      dataIndex: 'targetManageBranchName',
      key: 'targetManageBranchName',
      width: 120,
    },
    {
      title: '目标领用部门',
      dataIndex: 'targetUseBranchName',
      key: 'targetUseBranchName',
      width: 120,
    },
    {
      title: '目标领用人',
      dataIndex: 'targetEndUser',
      key: 'targetEndUser',
      width: 120,
    },
    {
      title: '目标机房',
      dataIndex: 'targetRoomName',
      key: 'targetRoomName',
      width: 160,
    },{
      title: '目标机柜',
      dataIndex: 'targetRackName',
      key: 'targetRackName',
      width: 120,
    },
    {
      title: '目标起始U位',
      dataIndex: 'targetStart',
      key: 'targetStart',
      width: 80,
    },{
      title: '目标结束U位',
      dataIndex: 'targetEnd',
      key: 'targetEnd',
      width: 80,
    },{
        title: '操作',
        key: 'operation',
        fixed: 'right',
        width: 60,
        render: (text, record) => (
            <span>
              <a onClick={this.onEditTransfer.bind(null, record.id_)}>编辑</a>
            </span>
        ),
      }];

    return (
      <span>
            <Modal
                maskClosable= {this.props.maskClosable}
                confirmLoading= {this.props.confirmLoading}
                title={this.props.title}
                width={1000}
                zIndex={100}
                visible={this.props.visible}
                onOk={this.okHandler}
                onCancel={this.props.onCancel}
                key={this.props.newKey}
          >
         <div style={{backgroundColor:'#fff'}}>
            <div style={{ }}>
            <div style={{width:'100%',backgroundColor:'#fff',paddingLeft:'20px'}}>
                <Form layout={'inline'} style={{marginTop: '0px'}}>
                  <FormItem style={{marginBottom:'0px'}}>
                    {getFieldDecorator('transferDetailList',{initialValue:editDetailList})(
                      <Input type="hidden"/>
                    )}
                  </FormItem>
                    <Row gutter={16}>
                      <Col span={8}>
                        <FormItem
                            label="单号"
                            hasFeedback
                          >
                          {
                            getFieldDecorator('id', {
                              initialValue: item.id_,
                            })(<Input  readOnly="readOnly" style={{ width: '150px' }} />)
                          }
                        </FormItem>
                      </Col>
                      <Col span={8}>
                        <FormItem
                              label="操作人"
                              hasFeedback
                            >
                            {getFieldDecorator('operatorBy', {
                                initialValue:item.operatorBy_+'',
                                rules: [{
                                  required: true, whitespace: true, message: '请选择操作人',
                                }]
                           })(
                                <Select
                                  showSearch
                                  style={{ width: 100 }}
                                  placeholder="选择操作人"
                                  optionFilterProp="children"
                                >
                                  {getUser(userList)}
                              </Select>
                              )}
                        </FormItem>
                      </Col>
                      <Col span={8}>
                         <FormItem
                              label="预计执行时间"
                              hasFeedback
                            >
                             {getFieldDecorator('executeTime', {
                               initialValue:moment(item.executeTime, 'YYYY-MM-DD'),
                                rules: [{
                                  required: true, type: 'object',whitespace: true, message: '请选择预计执行时间',
                                 }]
                               })(
                                <DatePicker style={{ width: 190 }}/>
                              )}


                        </FormItem>
                      </Col>
                    </Row>
                    <Row style={{marginTop:'20px'}}>
                      <Col span={24}>
                          <FormItem
                            label="备注"
                          >
                              {
                                getFieldDecorator('remark', {
                                    initialValue:item.remark,
                                  rules: [{ max: 200, message: '备注信息 200 字符以内' },]
                                })(<Input style={{ width: '890px' }} type="textarea" autosize={{ minRows: 3, maxRows: 3 }}/>)
                              }
                      </FormItem>
                      </Col>
                    </Row>
                   <Row style={{marginTop:'15px'}}>
                     <Col span={24}>
                     <hr style={{width:'926px',height:'0px',borderTop:'1px solid #e9e9e9',borderRight:'0px',borderBottom:'0px',borderLeft:'0px'}} />
                     </Col>
                   </Row>
                   {/* <Row>
                      <Col span={24}>
                        <div style={{width:'100%',height:'100%',marginTop:'15px',marginBottom:'5px',textAlign:'right',paddingRight:'10px'}}>
                           <FormItem>
                              <Button type="primary" size='large' onClick={this.onAddDetail}>新增明细</Button>
                          </FormItem>
                        </div>
                      </Col>
                    </Row> */}

                    <div style={{}}>
                        <div style={{width:'100%',padding:"10px 20px 20px",}}>
                              <Table columns={columns}
                                  rowKey={record => record.id_}
                                  dataSource={editDetailList}
                                  pagination={false}
                                  scroll={{ x: 2200 }}
                            />
                        </div>
                    </div>
                </Form>
            </div>

            </div>
        </div>
        </Modal>

      </span>
    );
  }

}

export default Form.create()(EditBorrowModal)
